window.addEventListener('load',function(){
let index=0;
// 分页
let page = location.hash.replace('#!fenye=', '') || 1;
let pageSize = 20;
let totals = 0;
    let arr=[236682871,236682731,236742444,236682773,236682735,236742576,236682777,236742508,236742578];
    

    mvLists();
    
    $('.tag_kind li').click(function(){
        index = $(this).index();
        mvLists();
        $(this).addClass('active').siblings().removeClass('active');
    })
    
function mvLists(){
    fetch(`http://39.96.88.57:9090/api/www/music/mvList?pid=${arr[index]}&pn=${page}&rn=${pageSize}&httpsStatus=1`).then(res=>res.json()).then(res=>{
   totals=res.data.total;
    mvListItem.innerHTML='';
    res.data.mvlist.forEach((item,index) => {
       if(index<20){
         mvListItem.innerHTML+=`
          <li class="mv_item">
                <div class="mv_bg">
                    <img src="${item.pic}" alt="">
                    <!-- 遮罩层 -->
                    <div class="cover">
                        <div class="play">
                            <i class="play-icon"></i>
                        </div>
                    </div>
                    <p class="play_cnt">
                        <span>
                            <i class="iconFont"></i>
                        ${item.mvPlayCnt>10000?(item.mvPlayCnt/10000).toFixed(1)+'万':item.mvPlayCnt}
                        </span>
                        <span>${item.songTimeMinutes}</span>
                    </p>
                </div>
                <p class="name" title="${item.name}">${item.name}</p>
                <p class="singer">${item.artist}</p>
            </li>
        `
       }
    });
render()

    })

}

// 分页
        render()
        function render() {
            layui.use('laypage', function () {
                let laypage = layui.laypage;
                //执行一个laypage实例
                laypage.render({
                    elem:'pagingTest' //注意，这里的 test1 是 ID，不用加 # 号
                    , count: totals, //数据总数，从服务端得到
                    limit: pageSize,
                    prev: "<",
                    next: ">",
                    groups: 3,
                    hash: 'fenye',
                    curr: location.hash.replace('#!fenye=', ''),
                    layout: ["prev", "page", "next"],
                    theme: '#ffdf1f',
                    jump: function (obj, first) {
                        //首次不执行
                        if (!first) {
                            page = obj.curr;
                            pageSize = obj.limit;
                            mvLists();
                        }
                    }
                });
            });


        }





})